<template>
  <div class="user">
    <div class="user_info">
      <div class="info">
        <img :src="user.headerimg" alt="" />
        <div class="text">
          <div class="top">
            <strong>{{ user.username }}</strong>
            <slot name="vip"></slot>
          </div>
          <slot name="desc"></slot>
        </div>
      </div>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {}
    }
  },
  created () {
    this.user = this.$store.getters.user
  }
}
</script>

<style lang="scss" scoped>
  .user_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 7.5rem;
    padding: 0.4rem 0.3rem;
    background-color: #fff;
    box-sizing: border-box;
    .info {
      display: flex;
      align-items: center;
      img {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: 0.2rem;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .top {
          display: flex;
          align-items: center;
        }
        p {
          padding-top: 0.1rem;
          font-size: 0.26rem;
          color: #999;
        }
        strong {
          padding-right: 0.1rem;
          font-size: 0.32rem;
          color: #333;
        }
        i {
          width: 0.54rem;
          height: 0.3rem;
          border-radius: 0.15rem;
          background-image: linear-gradient(to right, #8d6b2d, #cdad70);
          text-align: center;
          line-height: 0.3rem;
          font-size: 0.18rem;
          color: #000;
        }
      }
    }
    .icon-shezhi {
      font-size: 0.44rem;
      font-weight: 700;
      color: #666;
      line-height: 1.2rem;
    }
  }
</style>
